import React, { Component } from 'react'
import { LoginWrapper, LoginContent, Input, Button } from './style'
import { connect } from 'react-redux'
import { actionCreator } from './store'
import { Redirect } from 'react-router-dom'

class Login extends Component {
  render() {
    const { loginStatus } = this.props;
    if (!loginStatus){
      return (
        <LoginWrapper>
          <LoginContent>
            <Input
              ref={(nameInputRef) => { this.nameInputRef = nameInputRef }}
              placeholder='请输入姓名'
            />
            <Input
              ref={(pwInputRef) => { this.pwInputRef = pwInputRef }}
              type='password'
              placeholder='请输入密码'
            />
            <Button
              onClick={() => { this.props.login(this.nameInputRef, this.pwInputRef) }}
            >
              登录
          </Button>
          </LoginContent>
        </LoginWrapper>
      )
    }else{
      return (
        <Redirect
          to='/'
        />
      )
    }

  }
}
const mapStateToProps = (state) => ({
  loginStatus:state.getIn(['login','loginStatus']),
})
const mapDispatchToProps = (dispatch) =>({
  login(nameElem, pwElem) {
    dispatch(actionCreator.getLoginResult(nameElem.value, pwElem.value))
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Login)